import React, {useCallback, useEffect, useRef, useState} from "react";
import "./index.scss"
import ImgText from "../imgText";
import {getFlatArrDataById} from "../../utils";

export default function Tabs(props) {
  const {
    activeKey = 0,
    children,
    data = [],
    onChange,
    className='',
    style = {},
    type = 0,
    deep = 0,
    noLine = false,
    childData = []
  } = props;
  const [activeIndex, setActiveIndex] = useState({[deep]: 0})
  const [floor, setFloor] = useState(deep)
  const [activeTab, setActiveTab] = useState({[deep]: data})
  const tabRef = useRef({})

  const handleClick = useCallback((d, i, deep, type) => {
    if(type === 1) {
      return
    }
    setFloor(deep)
    setActiveIndex(obj => ({...obj, [deep]: i}))
    setActiveTab(obj => ({...obj, [deep]: d}))
    onChange && onChange(d, i, deep)
  }, [deep])

  const renderItem = useCallback((d, i) => {
    if(deep > 0 && d.icon_url) {
      return (<ImgText
        type={type}
        text={d.name || ''}
        checked={activeIndex[deep] === i}
        img={d.icon_url}
      />)
    }
    return <span className={`dir-${d.directory_type}`}>{d.name || ""}</span>
  }, [deep, activeIndex, type])

  useEffect(() => {
    if(!data || data.length === 0) {
      return
    }
    setActiveIndex(obj => ({...obj, [deep]: activeKey}))
    setActiveTab(obj => ({...obj, [deep]: data[activeKey]}))
  }, [data])

  if(!data || data.length < 1) {
    return null
  }

  const handleTouchMove = (floor) => {
    tabRef.current[floor].style.transform = ''
  }

  return (
    <div>
      <div className="tabs-wrap">
        <div
          className={`tabs tabs-${type} 
        tabs-deep-${floor} ${className} 
        ${noLine && 'noLine'}`}
          style={{...style, transform: `translateX(${-10 * activeIndex[floor]}%)`}}
          onTouchMove={() => handleTouchMove(floor)}
          ref={ref => tabRef.current[floor] = ref}
        >
          {data.map((d, i) => {
              const productData = (getFlatArrDataById(childData, 'directoryId', d.id) || {}).spu_list || []
              return (
                <div className="item-wrap">
                  <div key={d.name} onClick={handleClick.bind(null, d, i, floor, type)}
                       className={i === activeIndex[floor] ? `item active item-zkk-tab-${floor}-${i}` : `item item-zkk-tab-${floor}-${i}`}>
                    {renderItem(d, i)}
                    <div className="line" />
                  </div>

                  {type === 1 && productData.length > 0 &&
                  <div className={`item-content item-content-${deep}`}>
                    <div className="product-card">
                      {productData.map(d => d.title)}
                    </div>
                  </div>
                  }
                </div>
              )
            }
          )}
        </div>
      </div>

      {!!children && children}

      {type !== 1 && data.map((d, i) => {
          const productData = (getFlatArrDataById(childData, 'directoryId', d.id) || {}).spu_list || []
          return (
            <div className="item-wrap">
              {i === activeIndex[floor] && productData.length > 0 &&
              <div className={`item-content item-content-${deep}`}>
                <div className="product-card">
                  {productData.map(d => d.title)}
                </div>
              </div>
              }
            </div>
          )
        }
      )}

      <Tabs
        type={(activeTab[deep] || {}).sub_layout_direction}
        data={(activeTab[deep] || {}).sub_list || []}
        deep={deep + 1}
        noLine
        onChange={onChange}
        childData={childData}
      />
    </div>
  )
}
